<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>喜茶</title>
		<style type="text/css">
			#big{
				width: 396px;
				height: 767px;
				background-color: white;
				margin: auto;
			}
			p{
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			ul{
				padding: 0;
				margin: 0;
			}
			li{
				list-style: none;
			}
			a{
				color: #000000;
			}
			#flash {
				width: 100%;
				height: 240px;
				position: relative;
				cursor: pointer;
			}
			
			#flash #play {
				width: 100%;
				height: 240px;
				list-style: none;
				position: absolute;
				top: 0px;
				left: 0px;
				padding: 0;
				margin: 0;
			}
			
			#flash #play li {
				display: none;
				position: absolute;
				top: 0px;
				left: 0px;
				width: 100%;
			}
			
			#flash #play li img {
				float: left;
				width: 100%;
				height: 240px;
			}
			
			
			#button {
				position: absolute;
				bottom: -10px;
				left: 110px;
				list-style: none;
			}
			
			#button li {
				margin-left: 10px;
				float: left;
			}
			
			#button li div {
				width: 12px;
				height: 12px;
				background: #DDDDDD;
				border-radius: 6px;
				cursor: pointer;
			}
		</style>
		<script src="script/script.js" type="text/javascript"></script><!--导入js文件-->
	</head>
	<body>
		<div style="width: 100%; height: 100%; background: rgb(235, 237, 238);">
			<div id="big">
				<div style="color:black; font-family: Helvetica; width: 30px; height: 40px; text-align: center; line-height: 40px;
				display: inline-block; margin-left: 24px;">
					9:14
				</div><!--时间-->
				<div style=" float: right;">
					<img src="image/手机右上角.png">
				</div><!--手机右上角-->
				
				<div>
					<div id="flash">
						 <ul id="play">
						 	<li style="display: block; "><img src=""/></li>
						 	<li style="display: block; "><img src="" /></li>
						 	<li style="display: block; "><img src="" /></li>
						 </ul>
						 <ul id="button" style="padding-left: 40px;margin-top: 16px;margin-bottom: 16px;">
						 	<li><div style="background-color: black;"></div></li>
						 	<li><div></div></li>
						 	<li><div></div></li>
						 </ul><!--图片小圆点-->
					</div><!--新品介绍的盒子-->
				</div>
				<div style="width: 340px;height: 185px;background: white;filter: drop-shadow(rgba(0, 0, 0, 0.08) 0px 3px 6px);border-radius: 8.5px;margin: 5px 20px;display: flex;justify-content: space-evenly;align-items: center;">
					<div style="width: 132px;height: 132px;text-align: center;background-color: rgb(255 240 243);">
						<a href="diandan.html">
							<img src="image/icon/ziqu.png" style="width: 60px;height: 60px;margin-top: 10px;" />
							<p style="font-size: 17px;font-weight: 600;margin-top: 5px;">门店自取</p>
							<p style="font-size: 13px;margin-top: 5px;">下单免排队</p>
						</a>
					</div>
					<div style="width: 1px;height: 140px;background: rgb(242, 242, 242);transition: unset;"></div>
					<div style="width: 132px;height: 132px;text-align: center;background-color: rgb(255 240 243);">
						<a href="Address.html">
							<img src="image/icon/waimai.png" style="width: 60px;height: 60px;margin-top: 10px;" />
							<p style="font-size: 17px;font-weight: 600;margin-top: 5px;">外卖</p>
							<p style="font-size: 13px;margin-top: 5px;">无需接触 送喜到家</p>
						</a>
					</div>
				</div>
				<div style="width: 340px;background: rgb(255, 255, 255);margin: 15px 20px;display: flex;justify-content: space-between;align-items: center;">
					<div style="width: 145px;padding:15px 10px;background-color: rgb(236,222,225);border-radius: 9px;text-align: center;">
						<a href="baihuo.html">
							<div style="display: flex;align-items: center;justify-content: center;">
								<i style="background-image: url(image/icon/tuancan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;"></i>
								喜茶百货
							</div>
							<p style="color: rgb(170, 170, 170);font-size: 12px;margin-top: 5px;">新装气泡水畅饮更尽兴</p>
						</a>
					</div>
					<div style="width: 145px;padding:15px 10px;background-color: rgb(234,235,236);border-radius: 9px;text-align: center;">
						<div style="display: flex;align-items: center;justify-content: center;">
							<i style="background-image: url(image/icon/tuancan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;"></i>
							阿喜团餐
						</div>
						<p style="color: rgb(170, 170, 170);font-size: 12px;margin-top: 5px;">最高享9折火热预定中</p>
					</div>
				</div>
				<div style="display: flex;justify-content: space-between;">
					<div style="padding-left: 20px;">
						<a href="jifenshangcheng.html">
							<p style="font-size: 16px;font-weight: 500;background-color: rgb(255 240 243);">我的积分：22</p>
							<p style="font-size: 13px;color: #908f8f;background-color: rgb(255 240 243);">可兑换喜茶券和丰富灵感周边</p>
						</a>
					</div>
					<div style="text-align: center;padding-right: 20px;">
						<a href="huiyuanma.html">
							<i style="background-image: url(image/icon/erweima.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;background-color: rgb(255 240 243);"></i>
							<p style="font-size: 13px;color: #908f8f;background-color: rgb(255 240 243);">会员码</p>
						</a>
					</div>
				</div>
				
				<div style="position: fixed;width: 396px;bottom: 10px;background-color: white;height: 50px;">
					<ul style="display: flex;justify-content: space-around;">
						<li style="width: 30px;text-align: center;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="index.html">
								<i style="background-image: url(image/icon/shouye.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color: #000000;">首页</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="diandan.html">
								<i style="background-image: url(image/icon/diandan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">点单</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<i style="background-image: url(image/icon/baihuo1.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
							<p style="font-size: 12px;color:#908f8f;">百货</p>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;background-color: rgb(255 240 243);">
							<a href="MyOrder.html">
								<i style="background-image: url(image/icon/dingdan.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">订单</p>
							</a>
						</li>
						<li style="width: 30px;text-align: center;cursor: pointer;padding-top: 5px;">
							<a href="wode.html">
								<i style="background-image: url(image/icon/wode.png);background-size: 24px 24px;background-repeat: no-repeat;width: 24px;height: 24px;display: inline-block;"></i>
								<p style="font-size: 12px;color:#908f8f;">我的</p>
							</a>
						</li>
					</ul>
				</div><!--底边菜单栏-->
			</div><!--手机显示界面-->
		</div>
	</body>
</html>
